<template>
<div class="lyric">
  <div class="big">
    <img :src=$route.query.spic[index] alt="" class="bigImg">
  </div>
  <div class="lyric-title">
      <span class="lyric-title-s1" @click="back">
        <img src="../img/lyric/back.png" alt="">
      </span>
      <span class="lyric-title-s2">
        <span class="s2-text">
          {{$route.query.name[index]}}
        </span>
        <p>
          <span> {{$route.query.pname[index]}}</span>
          <img src="../img/lyric/next.png" alt="">
        </p>
      </span>
      <span class="lyric-title-s3">
        <img src="../img/lyric/zhuanfa.png" alt="">
      </span>
  </div>
  <div class="lyric-title-bgimg" v-show="showLyric">
    <span @click="showLy">
      <img :src=$route.query.spic[index] alt="">
    </span>
  </div>
  <div class="lyric-title-bgimgtwo" v-show="!showLyric">
    <div class="slider">
       <span class="slider-begin">
      <img src="../img/lyric/yinliang.png" alt="">
    </span>
      <span class="slider">
<van-slider active-color="#ee0a24">
  <div slot="button" class="custom-button"></div>
</van-slider>
    </span>
      <span class="slider-end">
     <img src="../img/lyric/dianshi.png" alt="">
    </span>
    </div>
    <div class="bgimgtwo-geci">
     按住屏幕分享歌词
    </div>
    <div class="bgimgtwo-lyric" ref="scrollss">
      <div class="warp">
        <p v-for="item in geci"
           :class="{active: item.cls}"
        >
          {{item.txt}}
        </p>
      </div>


    </div>
  </div>
  <div class="lyric-title-topimg" v-if="showLyric">
    <ul>
      <li>
        <img src="../img/lyric/love.png" alt="">
      </li>
      <li>
        <img src="../img/lyric/xiazai.png" alt="">
      </li>
      <li>
        <img src="../img/lyric/yinxiao.png" alt="">
      </li>
      <li>
        <img src="../img/lyric/pl.png" alt="">
      </li>
      <li>
        <img src="../img/lyric/more.png" alt="">
      </li>
    </ul>
  </div>
  <div class="lyric-title-topimg" v-if="!showLyric">
    <span>
      <img src="../img/lyric/play.png" alt="">
    </span>
  </div>
  <div class="lyric-title-slider">
    <span class="slider-begin">
     {{curr}}
    </span>
    <span class="slider">
<van-slider v-model="value" inactive-color="#a28080"  :max="all" @input="inp" @change="change"/>
    </span>
    <span class="slider-end">
    {{duration}}
    </span>
  </div>
  <div class="lyric-title-bot">
    <ul>
      <li class="li1">
        <img src="../img/lyric/xunhuan.png" alt="">
      </li>
      <li @click="last">
        <img src="../img/lyric/shang.png" alt="">
      </li>
      <li class="li3" @click="plays" v-show="audioShow">
        <img src="../img/lyric/play.png" alt="">
      </li>
      <li class="li3" @click="plays" v-show="!audioShow">
        <img src="../img/lyric/zanting.png" alt="">
      </li>
      <li @click="next">
        <img src="../img/lyric/xia.png" alt="">
      </li>
      <li class="li5">
        <audio  ref="bofang" muted  loop @canplay="getDuration" @timeupdate="updateTimer" @play="onPlay" @pause="onPause" :src="musicUrl" type="audio/mpeg">

        </audio>
        <img src="../img/lyric/liebiao.png" alt="">
      </li>
    </ul>
  </div>
</div>
</template>

<script>
  import {mapState} from 'vuex';
  import BScroll from '../../node_modules/better-scroll/dist/bscroll';
  import Lyric from '../../node_modules/lyric-parser/dist/lyric';

    export default {
        name: "lyric",
        data(){
          return{
            value:0,
            showLyric:true,
            audioShow:true,
            index:this.$route.query.index,
            curr:0,
            duration:'',
            slider:0,
            all:0,
            newValue:0,
            playing:false,
            updatShow:true,
            lyricr:'',
            geci:[],
            scroller:null,
          }
        },
        computed:{
          ...mapState(['musicUrl','musciGeci','musciTimer'])
        },
        methods:{
          onPlay(){
            this.playing=true;
          },
          onPause(){
            this.playing=false;
          },
          showLy(){
            this.showLyric=false;

          },
          back(){
            this.$router.go(-1);
          },
          plays(){
            if(!this.playing){
              this.$refs.bofang.play();
              this.audioShow=false;
              this.lyricr = new Lyric(this.$store.state.musciGeci,this.fn1);
              this.geci = this.lyricr.lines.map((item) => {
                item.cls = false;
                return item;
              });
              this.lyricr.play();

            }else {
              this.$refs.bofang.pause();
              this.audioShow=true;
              this.lyricr.stop();
            }

          },
          fn1({lineNum}){

            this.geci[lineNum - 1 < 0 ? 0 : lineNum - 1].cls = false;
            this.geci[lineNum].cls = true;
            if(lineNum > 6 ) {
              this.scroller.scrollTo(0, -(lineNum - 5) *35, 400);
            }

          },
          last(){
            if(this.index > 0){
              this.audioShow=true;
              this.$refs.bofang.pause();
              this.$refs.bofang.currentTime=0;
              this.index--;

            }
          },
          next(){
            if(this.index >= 0 && this.index < 100){
              this.audioShow=true;
              this.$refs.bofang.pause();
              this.$refs.bofang.currentTime=0;
              this.index++;
            }
          },
          getDuration(){
            this.all=this.$refs.bofang.duration;
            this.duration = this.formatTime(this.$refs.bofang.duration);

          },
          updateTimer(e){
            if(this.updatShow){
              this.curr = this.formatTime(e.target.currentTime);
              this.value=e.target.currentTime;

            }

          },
          formatTime(seconds) {
            var start =  ~~(seconds/60);
            var end = ~~(seconds%60);
            if(start< 10){
            start = '0'+start;
            }
            if(end<10){
            end = '0'+end;
            }
            return start + ':' + end;
          },
          inp(value){
            this.updatShow=false;
            console.log(value);
            this.curr = this.formatTime(value);
            console.log(this.curr);
          },
          change(value){
            this.$refs.bofang.currentTime =  value;
            this.updatShow=true;
            console.log(this.$refs.bofang.currentTime);
          }
        },
        created(){
        this.$api.getMusicUrl({id:this.$route.query.url[this.index]});
      },
        watch:{
          index:function () {
            this.$api.getMusicUrl({id:this.$route.query.url[this.index]});
          }
        },
        mounted() {
          this.scroller = new BScroll(this.$refs.scrollss, {});
        },
    }
</script>

<style lang="scss">
*{
  margin: 0px;
  padding: 0px;
}
  .lyric{

    width: 1245px;

    .big{
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -1;
      .bigImg{
        width: 100%;
        height: 100%;
        filter: blur(60px);
      }
    }

    /*background-image: linear-gradient(to right, #83675f , #917f71,#948a85,#715252);*/
    .van-slider{
      width: 100%;
    }
    .lyric-title{
      box-sizing: border-box;
      padding-top: 80px;
      padding-bottom: 10px;
      border-bottom: 2px solid #6c544e;
      span{
        vertical-align: middle;
        display: inline-block;
      }
      .lyric-title-s1,.lyric-title-s3{
        box-sizing: border-box;
        padding-left: 50px;
        img{
          width: 70px;
        }
      }
      .lyric-title-s1{
        padding-right: 60px;
      }
      .lyric-title-s2{

        width: 825px;
        text-overflow : clip;

        text-align: center;
        font-size: 48px;
        color: white;
        font-weight: bold;
        .s2-text{
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow : clip;
        }
        p{
          width: 100%;

          span{
            font-weight: unset;
          }
          img{
            vertical-align: middle;
            width: 52px;
          }
        }
      }
    }
    .lyric-title-bgimg{
      text-align: center;
      box-sizing: border-box;
      padding-top: 360px;

      padding-bottom: 410px;
      span{
        display: inline-block;
        width: 725px;
        height: 725px;
        border-radius: 50%;
        background-color: aqua;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
          object-fit: cover;
        }
      }
    }
    .lyric-title-bgimgtwo{
      box-sizing: border-box;
      padding: 0 50px;

      font-size: 0;
        .slider{
          box-sizing: border-box;
          padding: 35px 0;
          span{
            display: inline-block;
            vertical-align: middle;
            img{
              width: 85px;
              vertical-align: middle;
              height:85px;
              object-fit: cover;
            }
          }
          .slider-begin{
            font-size: 25px;
            color: #DED0D0;
            margin-right: 50px;
          }
          .slider{
            width:860px;
            .custom-button{
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background-color: white;
            }
          }
          .slider-end{
            font-size: 25px;
            color: #AA8786;
            margin-left:50px;
          }
        }
      .bgimgtwo-geci{
        text-align: center;
        font-size: 40px;
        color: #c2473a;
        font-weight: bold;
      }
      .bgimgtwo-lyric{
        height: 1380px;
        /*position: relative;*/

        margin: auto;
        overflow: hidden;
        .warp{
          p{
            color: #aaaaaa;
            font-size: 50px;
            line-height: 100px;

            text-align: center;
          }
          .active{
            color: white;
          }
        }


      }


    }
    .lyric-title-topimg{
      box-sizing: border-box;
      padding: 0 180px;

      span{
        display: inline-block;
        position: relative;
        left: -130px;
        img{
          width: 80px;
        }
      }
      ul{
        font-size: 0;
        li{
          list-style: none;
          display: inline-block;
          width: 20%;
          text-align: center;
          img{
            width: 90px;
            object-fit: cover;
          }
        }

      }
    }
    .lyric-title-slider{
      box-sizing: border-box;
      padding: 60px 50px;
      font-size: 0;

      span{
        display: inline-block;
        vertical-align: middle;
      }
      .slider-begin{
        font-size: 25px;
        color: #DED0D0;
        margin-right: 50px;
      }
      .slider{
        width: 870px;

      }
      .slider-end{
        font-size: 25px;
        color: #AA8786;
        margin-left:50px;
      }
    }
    .lyric-title-bot{
      box-sizing: border-box;
      padding: 0 50px 80px;

      ul{
        font-size: 0;
        li{
          list-style: none;
          width: 20%;
          text-align: center;
          display: inline-block;
          vertical-align: middle;
          img{
            width: 80px;
          }
        }
        .li3{
          img{
            width: 140px;
            height: 140px;
            object-fit: cover;
          }
        }
        .li1{
          text-align: left;
        }
        .li5{
          text-align: right;
        }
      }
    }
  }
</style>
